<nzx-configurable-query
  [hidden]="controls && controls.length === 0"
  #configQuery
  [controls]="controls"
  [nzxBtnSpan]="nzxBtnSpan"
  (queryChange)="adaptor.refresh()"
  (resetChange)="adaptor.reset()"
  >
</nzx-configurable-query>

<nz-table
  nzxTableAdaptor
  #adaptor="NzxTableAdaptor"
  [queryParams]="configQuery.queryParams"
  (nzxQueryParams)="nzxQueryParamsChange.emit($event)"
  (nzxQueryCacheQueryParams)="configQuery.setQueryParams($event)"
  #table
  [nzData]="list"
  [nzLoading]="loading"
  [nzTotal]="nzTotal"
  >
  <thead>
    <tr>
      @if (mode === 'single') {
        <th
          [nzShowCheckbox]="false"
          [nzWidth]="checkboxWidth"
        ></th>
      }
      @if (mode === 'multiple') {
        <th
          [nzWidth]="checkboxWidth"
          [nzShowCheckbox]="table.data.length > 0"
          [(nzChecked)]="checked"
          [nzIndeterminate]="indeterminate"
          [nzDisabled]="isDisabled"
          (nzCheckedChange)="onAllChecked($event)"
        ></th>
      }
      @for (item of tableConfig; track item) {
        <th nzAlign="center">
          {{ item.label }}
        </th>
      }
    </tr>
  </thead>
  <tbody>
    @for (data of table.data; track data) {
      <tr>
        <td
          [nzChecked]="setOfCheckedId.has(this.getValue(data, this.uniqueKey))"
          [nzDisabled]="data.disabled!"
          (nzCheckedChange)="onItemChecked(data, $event)"
        ></td>
        @for (item of tableConfig; track item) {
          <td>
            @if (!item.format && !item.template) {
              {{ data[item.key] | nzxSafeNull }}
            }
            @if (item.format && !item.template) {
              {{ item.format(data) | nzxSafeNull }}
            }
            @if (item.template) {
              <ng-container
                *ngTemplateOutlet="item.template; context: { $implicit: data }"
              ></ng-container>
            }
          </td>
        }
      </tr>
    }
  </tbody>
</nz-table>
